<template>
    <div class="crowd-card">
        <div class="basic-info">
            <img class="cover" :src="detail.cover" />
            <div class="name-wrap">
                <div class="name">{{detail.title}}</div>
                <div class="price">￥{{alreadyText}}/{{priceText}}</div>
            </div>
        </div>
        <div class="progress-box">
            <progress class="progress" :percent="percent" color="#E95930" />
        </div>
        <dib class="btn-wrap">
            <div class="btn-group">
                <button class="btn btn-mobile btn-primary-transparent btn-large btn-block" @click="toDetail">进入详情</button>
                <div class="line-box"></div>
                <wx-button class="btn btn-mobile btn-primary-transparent btn-large btn-block" open-type="share">分享众筹</wx-button>
            </div>
        </dib>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';
import {
    api,
} from '@/lib/api';

export default {
    name: 'CrowdCard',
    props: {
        detail: {
            type: Object,
        },
    },
    computed: {
        /** 筹集比例 */
        percent() {
            const detail = this.detail;
            return Math.floor((detail.self_pay + detail.support_money) / detail.price * 100);
        },
        /** 已筹集金额 */
        alreadyText() {
            return currency(this.detail.self_pay + this.detail.support_money);
        },
        /** 全部金额 */
        priceText() {
            return currency(this.detail.price);
        },
    },
    methods: {
        toDetail(modelVisible) {
            api.navigateTo({
                url: '/pages/crowd_detail/main',
                query: {
                    crowd_id: this.detail.id,
                },
            });
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";
.crowd-card {
    box-sizing: border-box;
    width: 100%;
    padding: 14px;

    .basic-info {
        display: flex;
        flex-direction: row;
        .cover {
            width: 95px;
            height: 63px;
            border-radius: 7px;
        }
        .name-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-left: 8px;
            .name {
                flex: 1;
                width: 100%;
                text-align: left;
            }
            .price {
                width: 100%;
                .text-normal();
                color: @color-primary;
                text-align: right;
            }
        }
    }

    .progress-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 20px 0;
        .progress {
            flex: 1;
        }
        .sm-text {
            padding-left: 5px;
            font-size: 12px;
            color: #101010;
        }
    }
    .btn-wrap {
        .btn-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            border: 1px solid @color-primary;
            border-radius: 100px;
            overflow: hidden;
            .line-box {
                height: @button-large-height;
                width: 1px;
                background-color: @color-primary;
            }
            .btn {
                flex: 1;
                text-align: center;
                border: none;
                outline: none;
                background: @white-color;
            }
        }
    }
}
</style>